
<template>
  <div class="asset-disposal-apply">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>资产报废申请</span>
          <el-button @click="handleBack">返回</el-button>
        </div>
      </template>

      <!-- 资产信息 -->
      <el-descriptions title="资产信息" :column="2" border class="asset-info">
        <el-descriptions-item label="资产编码">{{ assetInfo.code }}</el-descriptions-item>
        <el-descriptions-item label="资产名称">{{ assetInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="资产分类">
          <el-tag :type="getCategoryType(assetInfo.category)">
            {{ getCategoryLabel(assetInfo.category) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ assetInfo.model }}</el-descriptions-item>
        <el-descriptions-item label="使用部门">{{ assetInfo.department }}</el-descriptions-item>
        <el-descriptions-item label="使用人">{{ assetInfo.user }}</el-descriptions-item>
        <el-descriptions-item label="存放位置">{{ assetInfo.location }}</el-descriptions-item>
        <el-descriptions-item label="资产状态">
          <el-tag :type="getStatusType(assetInfo.status)">
            {{ getStatusLabel(assetInfo.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="购置日期">{{ assetInfo.purchaseDate }}</el-descriptions-item>
        <el-descriptions-item label="资产价值">¥{{ assetInfo.value.toLocaleString() }}</el-descriptions-item>
        <el-descriptions-item label="用友编号" v-if="assetInfo.category === 'fixed'">{{ assetInfo.yyCode || '未关联' }}</el-descriptions-item>
        <el-descriptions-item label="现状描述" :span="2">{{ assetInfo.description }}</el-descriptions-item>
      </el-descriptions>

      <!-- 资产图片 -->
      <div class="asset-images" v-if="assetInfo.images && assetInfo.images.length">
        <h4>资产图片</h4>
        <el-image
          v-for="(image, index) in assetInfo.images"
          :key="index"
          :src="image"
          :preview-src-list="assetInfo.images"
          fit="cover"
          class="asset-image"
        />
      </div>

      <!-- 减档申请表单 -->
      <el-form
        ref="disposalFormRef"
        :model="disposalForm"
        :rules="disposalRules"
        label-width="120px"
        class="disposal-form"
      >
        <el-form-item label="减档类型" prop="disposalType">
          <el-radio-group v-model="disposalForm.disposalType">
            <el-radio label="scrap">报废</el-radio>
            <el-radio label="disposal">处置</el-radio>
            <el-radio label="write_off" v-if="assetInfo.category === 'lease_improvement'">减账</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="减档原因" prop="reason">
          <el-select v-model="disposalForm.reason" placeholder="请选择减档原因" style="width: 100%">
            <el-option label="达到使用年限" value="lifespan" />
            <el-option label="严重损坏无法修复" value="damaged" />
            <el-option label="技术落后被淘汰" value="obsolete" />
            <el-option label="其他原因" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="减档日期" prop="disposalDate">
          <el-date-picker
            v-model="disposalForm.disposalDate"
            type="date"
            placeholder="请选择减档日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="减档说明" prop="description">
          <el-input
            v-model="disposalForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入减档说明"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
            :on-remove="handleRemove"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持jpg/png/pdf文件，且不超过5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交申请</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 审批流程 -->
      <div class="approval-process">
        <h4>审批流程</h4>
        <el-steps :active="2" finish-status="success">
          <el-step title="发起申请" description="资产管理员" />
          <el-step title="财务审核" description="财务资产管理员" />
          <el-step title="领导审批" description="部门领导" />
          <el-step title="完成" description="审批完成" />
        </el-steps>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const disposalFormRef = ref()
const fileList = ref([])

// 资产信息
const assetInfo = reactive({
  id: '',
  code: '',
  name: '',
  category: '',
  model: '',
  department: '',
  user: '',
  location: '',
  status: '',
  purchaseDate: '',
  value: 0,
  yyCode: '',
  description: '',
  images: []
})

// 减档申请表单
const disposalForm = reactive({
  assetId: '',
  disposalType: 'scrap',
  reason: '',
  disposalDate: '',
  description: ''
})

// 表单验证规则
const disposalRules = reactive({
  disposalType: [
    { required: true, message: '请选择减档类型', trigger: 'change' }
  ],
  reason: [
    { required: true, message: '请选择减档原因', trigger: 'change' }
  ],
  disposalDate: [
    { required: true, message: '请选择减档日期', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入减档说明', trigger: 'blur' }
  ]
})

// 初始化数据
const initData = () => {
  const assetId = route.params.id
  // 实际应该从API获取资产数据
  // 模拟数据
  Object.assign(assetInfo, {
    id: assetId,
    code: 'ZC20230001',
    name: '笔记本电脑',
    category: 'fixed',
    model: 'ThinkPad X1 Carbon',
    department: '技术部',
    user: '张三',
    location: '总部A座501',
    status: 'in_use',
    purchaseDate: '2023-01-15',
    value: 8500,
    yyCode: 'YY20230001',
    description: '技术部开发用笔记本电脑，配置较高',
    images: [
      'https://picsum.photos/seed/laptop1/400/300.jpg',
      'https://picsum.photos/seed/laptop2/400/300.jpg'
    ]
  })

  // 设置表单初始值
  disposalForm.assetId = assetId
  disposalForm.disposalDate = new Date()
}

// 获取资产分类标签
const getCategoryLabel = (category) => {
  const categoryMap = {
    fixed: '固定资产',
    low_value: '低值易耗品',
    lease: '租赁资产',
    lease_improvement: '租入固定资产改良'
  }
  return categoryMap[category] || category
}

// 获取资产分类类型
const getCategoryType = (category) => {
  const typeMap = {
    fixed: '',
    low_value: 'success',
    lease: 'warning',
    lease_improvement: 'info'
  }
  return typeMap[category] || ''
}

// 获取状态标签
const getStatusLabel = (status) => {
  const statusMap = {
    in_use: '在用',
    idle: '闲置',
    maintenance: '维修中',
    scrapped: '已报废'
  }
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    in_use: 'success',
    idle: 'info',
    maintenance: 'warning',
    scrapped: 'danger'
  }
  return typeMap[status] || ''
}

// 返回列表
const handleBack = () => {
  router.push('/asset-disposal')
}

// 文件变化
const handleFileChange = (file, fileList) => {
  console.log(file, fileList)
}

// 移除文件
const handleRemove = (file, fileList) => {
  console.log(file, fileList)
}

// 提交表单
const submitForm = () => {
  disposalFormRef.value.validate((valid) => {
    if (valid) {
      // 实际应该调用API保存数据
      console.log('减档申请表单数据：', disposalForm)
      ElMessage.success('提交申请成功')
      router.push('/asset-disposal')
    }
  })
}

// 重置表单
const resetForm = () => {
  disposalFormRef.value.resetFields()
  disposalForm.assetId = assetInfo.id
  disposalForm.disposalDate = new Date()
  fileList.value = []
}

// 页面加载时初始化数据
onMounted(() => {
  initData()
})
</script>

<style scoped>
.asset-disposal-apply {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.asset-info {
  margin-bottom: 20px;
}

.asset-images {
  margin-bottom: 20px;
}

.asset-images h4 {
  margin-bottom: 10px;
}

.asset-image {
  width: 150px;
  height: 150px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.disposal-form {
  max-width: 600px;
  margin: 20px 0;
}

.approval-process {
  margin-top: 30px;
}

.approval-process h4 {
  margin-bottom: 20px;
}
</style>
